<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <style>
      td {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <button id="add">我要留言</button>
    <table border="1" style="width: 500px; margin-top: 30px">
      <thead>
        <tr>
          <th>ID</th>
          <th onfocus="">标 题</th>
          <th>留言人</th>
          <th>内 容</th>
          <th>时 间</th>
          <th>操 作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div
      style="
        width: 500px;
        border: 1px solid #000;
        text-align: left;
        padding: 10px;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%);
        background: rgb(207, 127, 127);
        display: none;
      "
      id="addDiv"
    >
      <h1>发布留言</h1>
      <div>标题：<input type="text" id="tit" /></div>
      <div style="margin-top: 20px">
        内容：<textarea name="" id="con" cols="40" rows="5"></textarea>
      </div>
      <div style="margin-top: 20px">
        留言人：<input type="text" id="username" />
      </div>

      <button style="margin-top: 20px" id="sendly">发布留言</button>
      <button id="offDiv">关闭</button>
    </div>
  </body>
  <script>
    $(function () {
      getList()
      $('#add').on('click', function () {
        $('#addDiv').show()
      })
      $('#offDiv').click(() => {
        $('#addDiv').hide()
      })
      $('#sendly').click(function () {
        var title = $('#tit').val(),
          con = $('#con').val(),
          username = $('#username').val()
        $.ajax({
          url: 'https://liu.zzgoodqc.cn/lyb/add',
          method: 'POST',
          dataType: 'json',
          data: {
            title: title,
            content: con,
            name: username,
          },
          success: function (res) {
            console.log(res)
            if (res.code == 200) {
              alert(res.msg)
              $('#addDiv').hide()
              getList()
            }
          },
        })
      })
    })
    //获取留言列表
    function getList() {
      $.ajax({
        url: 'https://liu.zzgoodqc.cn/lyb',
        method: 'GET',
        dataType: 'json',
        success: function (res) {
          var strHtml = ''
          for (let i in res.data) {
            strHtml += `<tr>
                            <td>${res.data[i].id}</td>
                            <td>${res.data[i].title}</td>
                            <td>${res.data[i].name}</td>
                            <td>${res.data[i].content}</td>
                            <td>${res.data[i].created_at}</td>
                            <td><button onclick="del(${res.data[i].id})">del</button></td>
                        </tr>`
          }
          $('tbody').html(strHtml)
        },
      })
    }
    function del(id) {
      if (confirm('确定要删除吗？')) {
        $.ajax({
          url: 'https://liu.zzgoodqc.cn/del/' + id,
          method: 'GET',
          dataType: 'json',
          success: function (res) {
            console.log(res)
            if (res.code == 200) {
              alert(res.msg)
              getList()
            }
          },
        })
      }
    }
  </script>
</html>
